<template>
  <div class="collection">
    <div class="left-collection-list">
      <div class="search-box">
        <div class="search-input"><el-icon><Search /></el-icon></div>
      </div>
      <div class="list-wrapper">
        <div class="topic-list-wrapper">
          <topic-item v-for="(item, index) in collection.collections" :key="index" :item = "item" @selectedItem = "selectedItem"></topic-item>
        </div>
      </div>
    </div>
    <div class = "collection-wrapper">
      <div class = "collection-header-wrapper">
        <content-header :show-collection-icon = "false"></content-header>
      </div>
      <div class="collection-message-list-wrapper">
        <div class="collection-message-list">
          <div class="collection-message-item" v-for="qa in collection.curCollectionMessages">
            <div class="select-box" v-if="multiSelect">
              <el-checkbox v-model="qa.selected"></el-checkbox>
            </div>
            <ask :message="qa.askMessage"></ask>
            <answer :message="qa.answerMessage" :message-id = "qa.answerMessageId"></answer>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import TopicItem from "@/components/TopicItem.vue";
import {useRouter} from "vue-router";
import collectionStore from '@/stores/collection';
import ContentHeader from "@/components/contentHeader.vue";
import {ref} from "vue";
import Ask from "@/components/ask.vue";
import Answer from "@/components/answer.vue";
const collection = collectionStore();
const router = useRouter()

const multiSelect = ref(false);

collection.loadCollections();
const selectedItem = (collectionId: string) => {
}
</script>

<style lang="less" scoped>
.search-box {
  width: 100%;
  height: 8vh;
  display: flex;
  .search-input {
    border: 1px #F3F4F7 solid;
    padding: 6px 12px;
    background: #F3F4F7;
    border-radius: 7px;
    width: 172px;
    margin: auto;
    color: #D3D8DC;
    height: 4.5vh;
  }
}
.collection {
  display: flex;
  .left-collection-list {
    width: 20%;
    height: 100vh;
    border-right: 1px #EFF1F3 solid;
    .list-wrapper {
      height: 92vh;
      overflow-y: auto;
    }
  }
}

.collection-wrapper {
  width: 100%;
  height: 100vh;
  .collection-header-wrapper {
    width: 100%;
  }
  .collection-message-list-wrapper{
    width: 80%;
    top: 2vh;
    margin: auto;
    height: calc(100vh - 22vh);
    overflow-y: scroll;
    .collection-message-list{
      width: 100%;
    }
  }
}
</style>